<template>
    <div class="main">
        <el-row :gutter="40">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <p class="tittle">待开发 💡</p>
                    <draggable class="draggable-list" :list="tasks.todos" group="tasks" >
                        <div v-for="(idea, i) in tasks.todos" :key="i">
                            <div class="tag-idea">
                                <p>{{ idea }}</p>
                            </div>
                        </div>
                    </draggable>
                    <div class="add-tag" @click="dialogFormVisible = true">
                        <p>+ 添加卡片</p>
                    </div>
                    <el-dialog title="添加卡片" :visible.sync="dialogFormVisible">
                            <el-form :model="form">
                                <el-row>
                                    <el-col :span="6">
                                        <el-form-item label="卡片内容">
                                            <el-input v-model="form.name" autocomplete="off"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="卡片内容">
                                            <el-input v-model="form.name" autocomplete="off"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="卡片内容">
                                            <el-input v-model="form.name" autocomplete="off"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="addTag(form)" >添 加</el-button>
                            </div>
                        </el-dialog>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <p class="tittle">开发中 ✍</p>
                    <draggable class="draggable-list" :list="tasks.inprogress" group="tasks">
                        <div v-for="(todo, i) in tasks.inprogress" :key="i">
                            <div class="tag-todo">
                                <p>{{ todo }}</p>
                            </div>
                        </div>
                    </draggable>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <p class="tittle">待测试 🗓</p>
                    <draggable class="draggable-list" :list="tasks.review" group="tasks">
                        <div v-for="(review, i) in tasks.review" :key="i">
                            <div class="tag-review">
                                <p>{{ review }}</p>
                            </div>
                        </div>
                    </draggable>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <p class="tittle">已完成 ✅</p>
                    <draggable class="draggable-list" :list="tasks.completed" group="tasks">
                        <div v-for="(completed, i) in tasks.completed" :key="i">
                            <div class="tag-completed">
                                <p>{{ completed }}</p>
                            </div>
                        </div>
                    </draggable>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
    components: {
        draggable,
    },
    data() {
        return {
            tasks: {
                todos: ["更新文档","uuuuyy"],
                inprogress: ["组件开发", "解决容拖拽问题"],
                review: ["实现富文本编辑", "解决显示问题"],
                completed: ["已完成任务"],
            },
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            // formLabelWidth: '50px'
        }
    },
    methods: {
        addTag(e){
            let input_name = e.name
            console.log(input_name)
            console.log(this.tasks.todos)
            todoChange(input_name)
        },
        todoChange(e){
            this.tasks.todos.push(e)
        }
    }

}  


</script>

<style scoped>
.main {
    margin-left: 20px;
    margin-right: 20px;

}

.bg-purple {
    background: #dfe3e8;
}

.grid-content {
    border-radius: 20px;
    height: 80vh;
    min-height: 30vh;
    max-height: 90vh;
}

.tittle {
    padding-top: 20px;
    font-size: 22px;
}

.draggable-list {
    min-height: 1vh;
}

.draggable-list>div {
    cursor: pointer;
}

.tag-idea {
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 20px;
    background-color: #FFFBF4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.tag-idea:active {
    background-color: #A9ABAE;
}

.tag-idea p {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 17px;
    word-wrap: break-word;
    word-break: break-all;
}

.tag-todo {
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 20px;
    background-color: #FFFBF4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.tag-todo:active {
    background-color: #A9ABAE;
}

.tag-todo p {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 17px;
    word-wrap: break-word;
    word-break: break-all;
}

.tag-review {
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 20px;
    background-color: #FFFBF4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.tag-review:active {
    background-color: #A9ABAE;
}

.tag-review p {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 17px;
    word-wrap: break-word;
    word-break: break-all;
}

.tag-completed {
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 20px;
    background-color: #489783;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.tag-completed:active {
    background-color: #A9ABAE;
}

.tag-completed p {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 17px;
    word-wrap: break-word;
    word-break: break-all;
}

.add-tag {
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 20px;
    background-color: #FFFBF4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
.add-tag:active {
    background-color: #A9ABAE;
}
.add-tag p {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 17px;
}
</style>